<template>
  <div class="app-container">
    <div class="grade_wrap">
      <el-col :span="5">
        <el-input placeholder="搜索" @change="getSearchContent()" v-model="keyword">
          <el-button slot="append" @click="getSearchContent()" icon="search"></el-button>
        </el-input>
      </el-col>
      <el-date-picker v-model="selectedDate" type="daterange" placeholder="选择日期范围" style="margin: 0 15px">
      </el-date-picker>
      <el-select v-model="selectedContent" @change="getSearchContent">
        <el-option v-for="item in contentOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-table
        :data="gradeList"
        border
        style="margin:20px 0;">
        <el-table-column
          prop="order_id"
          label="订单ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="score"
          label="综合评分"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="text"
          label="内容"
          min-width="200">
        </el-table-column>
        <el-table-column
          prop="rateTime"
          label="评论时间"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="买家"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template scope="scope">
           <div v-if="scope.row.status!=2">
               <el-button size="small" @click.native="goDetail(scope.row.order_id)">查看订单</el-button>
            <el-button  size="small" type="primary" @click.native="goReply(scope.row)">回复</el-button>
            </div>
            <div v-else>
              <el-button size="small"  @click.native="goDetail(scope.row.order_id)">查看订单</el-button>
              <el-button  size="small"  @click.native="goReply(scope.row)" type="info" >已回复</el-button> 
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getSellerComment } from "@/api/comment";
import { getToken } from "@/utils/auth";
import formatDate from "@/utils/date";
export default {
  data() {
    return {
      keyword: "",
      total: 0,
      selectedContent: "全部",
      currentPage: 1,
      selectedDate: "",
      contentOptions: [
        {
          value: -1,
          label: "全部"
        },
        {
          value: 1,
          label: "有评价内容"
        },

        {
          value: 0,
          label: "无评价内容"
        }
      ],
      gradeList: [],
      seller_id: ""
    };
  },
  created() {
    this.$nextTick(() => {
      this.seller_id = getToken();
      this.getComment();
    });
  },
  methods: {
    goDetail(order_id) {
      this.$router.push({ path: "../order/detail" + "?id=" + order_id });
    },
    goReply(comment) {
      comment = encodeURIComponent(JSON.stringify(comment));
      this.$router.push({ path: "./grade" + "?comment=" + comment });
    },
    getComment() {
      let id = this.seller_id;
      let offset = this.currentPage;
      let keyword = this.keyword;
      let status = this.selectedContent == "全部" ? -1 : this.selectedContent;
      console.log(status);
      let date = this.selectedDate;
      getSellerComment(id, offset, keyword, date, status).then(res => {
        if (res.comments) {
          this.gradeList = res.comments;
          this.gradeList.map(item => {
            item.rateTime = formatDate(
              new Date(item.rateTime * 1),
              "yyyy-MM-dd"
            );
            return item;
          });
          this.total = res.count;
        }
      });
    },
    getSearchContent() {
      this.keyword = this.keyword.replace("'", "");
      this.getComment();
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>